<template>
	<div class="self-appoint">
		<div class="all-participants" v-for="item in allParticipants" :key="item.id">
			<div class="title">
				<div class="dot"></div>
				<div class="node-name">{{ item.nodeName }}</div>
				<div class="tip">{{ item.nodeDesc }}</div>
				<div class="tag">{{ item.approveType || "" }}</div>
			</div>
			<div class="all-participants-content">
				<v-user :message="item.user"></v-user>
				<template v-if="item.users">
					<v-user :message="user" v-for="user in item.users" :key="user.id"></v-user>
				</template>
				<template v-if="item.userGroup">
					<template v-for="user in item.userGroup">
						<v-user v-for="(items, indexs) in user" :key="indexs" :message="items"></v-user>
					</template>
				</template>

				<v-auditer
					v-if="(item.approveAppointVar || item.nodeTypeName === 'CS') && !readonly"
					v-model="formData[item.approveAppointVar || item.nodeId]"
					disDept
					:multiple="item.nodeUserType === '01'"
					authFlag="00"
					:disabled="
						item.nodeTypeName === 'CS'
							? [item.user ? item.user.id : '', ...(item.users ? item.users.map(item => item.id) : [])]
							: false
					"
				>
					<template #default="{ names, list, open }">
						<div v-if="item.nodeUserType === '01'">
							<div class="list" v-for="({ name }, index) in list" :key="index">
								<div class="name">
									<div class="avatar">
										{{ formatUsername(name) }}
									</div>
									{{ name }}
								</div>
							</div>
						</div>
						<div class="list" v-else>
							<div class="name">
								<div class="avatar">
									{{ formatUsername(names) }}
								</div>
								{{ names }}
							</div>
						</div>

						<div class="s-auditer" @click="open"></div>
					</template>
				</v-auditer>
			</div>
		</div>
	</div>
</template>

<script>
import request from "@/common/request"
import VUser from "./user.vue"
const baseUrl = process.env.VUE_APP_ROOT_URL_ENV

export default {
	name: "self-appoint",
	model: {
		prop: "modelValue",
		event: "update:value",
	},
	props: {
		modelValue: {},
		actKey: {
			default: "",
		},
		fid: {
			default: "",
		},
		engineVersion: {
			default: "",
		},
		pid: {
			default: "",
		},
		readonly: {
			type: Boolean,
			default: false,
		},
		request: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			allParticipants: [],
			formData: {},
		}
	},
	computed: {},
	created() {
		if (this.fid || this.actKey) {
			this.getData()
		}
	},
	methods: {
		async getData() {
			if (this.request) {
				const query = {
					pid: this.pid,
				}
				if (this.actKey) {
					query.actKey = this.actKey
				}
				if (this.fid) {
					query.fid = this.fid
				}
				if (this.engineVersion) {
					query.engineVersion = this.engineVersion
				}
				try {
					const { code, data } = await request("get", "/flowable/approves/allParticipants", query)

					if (code == 0) {
						this.setData(data)
					}
				} catch (error) {
					this.$message.error("获取审批人失败")
				}
				return
			}
			try {
				const {
					data: { code, data },
				} = await this.$axios({
					method: "get",
					url: `${baseUrl}flowable/approves/allParticipants?fid=${this.fid}`,
					headers: {
						Authorization: "Bearer " + localStorage.getItem("token") || "",
					},
				})
				if (code == 0) {
					this.setData(data)
				}
			} catch (error) {
				this.$message.error("获取审批人失败")
			}
		},
		setData(data) {
			const formData = {}
			for (let i = 0; i < data.length; i++) {
				const item = data[i]
				if (!item.approveAppointVar) {
					continue
				}
				const user = []

				if (item.user && +item.user.id > 0) {
					user.push(item.user.id)
				} else if (Array.isArray(item.users)) {
					item.users.forEach(item => {
						if (+item.id > 0) {
							user.push(item.id)
						}
					})
				}

				formData[item.approveAppointVar] = {
					dept: [],
					user,
				}
			}

			this.formData = formData
			this.allParticipants = data
		},

		formatUsername: name => (name ? name.slice(0, 2) : ""),
	},
	components: { VUser },
}
</script>

<style lang="scss" scoped>
$color: #409eff;

.all-participants {
	margin-bottom: 20px;
	position: relative;
	&::before {
		content: "";
		position: absolute;
		top: 15px;
		left: 5px;
		background: $color;
		width: 2px;
		height: calc(100% + 21px);
	}
	&:last-child {
		&::before {
			display: none;
		}
	}
	.title {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		.dot {
			width: 13px;
			height: 13px;
			border-radius: 50%;
			background-color: $color;
			margin-right: 10px;
		}
		.node-name {
			font-size: 16px;
			font-weight: 500;
			margin-right: 10px;
		}
		.tip {
			font-size: 14px;
			color: #909399;
			margin-right: 10px;
		}
		.tag {
			font-size: 14px;
			color: #909399;
			padding: 2px 10px;
			border-radius: 4px;
			background-color: #f5f7fa;
		}
	}
	.all-participants-content {
		padding-left: 30px;
	}
	.s-auditer {
		width: 40px;
		height: 40px;
		border-radius: 10px;
		position: relative;
		background: #ddd;
		cursor: pointer;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
			width: 2px;
			height: 20px;
			background: #fff;
		}
		&::before {
			transform: rotate(90deg);
		}
	}
	.list {
		margin-bottom: 15px;
		.name {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 18px;
		}
		.avatar {
			width: 40px;
			height: 40px;
			overflow: hidden;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			color: #fff;
			background: #e88f21;
			font-size: 14px;
			margin-right: 15px;
		}
	}
}
</style>
